<!-- 父页面 -->
<template>
  <div>
    <a-button type="primary" shape="circle" icon="left" class="btn" @click="go" />
    <div>
      <a-steps :current="currentClick" @change="onClick">
        <a-step
          v-for="item in steps"
          :key="item.title"
          :title="item.title"
          style="margin-left:50px;margin-right:50px;"
        />
      </a-steps>
      <!--       <a-steps v-model="currentClick" type="navigation" :style="stepStyle"  @change="onClick">-->
      <!--                <a-step status="finish" title="等待报价" />-->
      <!--                <a-step status="finish" title="等待上传合同" />-->
      <!--                <a-step status="finish" title="指派项目经理" />-->
      <!--                <a-step status="finish" title="施工中" />-->
      <!--                <a-step status="finish" title="已完成" disabled />-->
      <!--            </a-steps>-->
      <div></div>
      <div class="steps-content">
        <template v-if="currentClick == 0">
          <projectDetailsList :id=id />
        </template>
        <template v-if="currentClick == 1">
          <uploadContract :id=id :current=2 />
        </template>
        <template v-if="currentClick == 2">
          <projectManagerList  :designate=designate />
        </template>
        <template v-if="currentClick == 3">
          <projectManage :id=id />
        </template>
        <template v-if="currentClick == 4">
          <uploadCoasdntract2 :id=id :current=4 />
        </template>
      </div>
      <div class="steps-action">
        <a-button v-if="visible" type="primary" @click="next">
          下一步
        </a-button>
        <!-- <a-button v-if="current == steps.length - 1" type="primary"
                    @click="$message.success('Processing complete!')">
                    Done
                </a-button> -->
        <!-- <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
                    Previous
                </a-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import projectDetailsList from './quoted/projectDetailsList'
import uploadContract from './contract/uploadContract'
import uploadCoasdntract2 from './acceptance/acceptanceform'
import projectManage from './constructionsite/projectManage'
import projectManagerList from './projectmanager/projectManagerList'
import { submitNode,designatePerson } from '@/api/api'

export default {
  name: 'projectListIndex',
  components: {
    projectDetailsList,
    uploadContract,
    projectManage,
    projectManagerList,
    uploadCoasdntract2
  },
  inject: ['reload'],
  watch: {
    $route(n) {
      console.log(n,'route');
      if (n.params.current) {
        // this.current = n.params.current
        this.current = parseInt(n.params.current)
        this.currentClick= this.current;
        this.id = this.$route.params.id;
        console.log('当前进度'+this.current+' 当前id:'+n.params.id);

        this.visible = true;
        if (this.current == 5){
          this.visible = false;
          this.currentClick = 4;
          console.log(this.current,'12312312312312312');
        }else {
          this.currentClick = this.current;
        }

      }
    }
  },
  data() {
    return {
      designate:'',
      input: '',
      visible: true,
      current: 0,
      currentClick: 0,
      id:0,
      roleList: [],
      model: {},
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset'
      },
      headers: {
        authorization: 'authorization-text'
      },
      steps: [
        {
          title: '报价单',
          content: 'first'
        },
        {
          title: '上传合同',
          content: 'two'
        },
        {
          title: '指派项目经理',
          content: 'three'
        },
        {
          title: '工程管理',
          content: 'four'
        },
        {
          title: '上传验收清单',
          content: 'last'
        }
      ],
      labelCol: {
        xs: { span: 12 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 5 }
      },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },

  mounted() {
    this.id = this.$route.params.id;
    // this.current = this.$route.params.current;
    this.current = parseInt(this.$route.params.current)

    console.log(this.current,'created');
    this.visible = true;
    if (this.current == 5){
      this.visible = false;
      this.currentClick = 4;
      console.log(this.current,'12312312312312312');
    }else {
      this.currentClick = this.current;
    }
  },
  created() {
    this.id = this.$route.params.id;
    // this.current = this.$route.params.current;
    designatePerson({
      engineeringId:this.id
    }).then((res) => {

      this.designate={
        id:this.id,
        designate:res.data
      }
      console.log(this.designate,'1111111111')
    })
    this.current = parseInt(this.$route.params.current)

    console.log(this.current,'created');
    this.visible = true;
    if (this.current == 5){
      this.visible = false;
      this.currentClick = 4;
      console.log(this.current,'12312312312312312');
    }else {
      this.currentClick = this.current;
    }

  },
  methods: {
    go() {
      //返回按钮
      this.$router.push('/engineering/project_list')
    },
    onClick(value) {

      //  this.visible = false
      console.log(this.current,value)
      if (this.current  >= value) {
        this.currentClick = value
        // this.visible =false
      }
      if(this.current == this.currentClick){
        this.visible =true;
      }else {
        this.visible = false;
      }
      // else
      // if (this.current < value){
      //     this.visible == false
      // }
    },
    next() {
      let _this = this;
      this.$confirm({
        title: '是否确认到下一步?',
        content: '确认以后无法回退',
        onOk() {
          _this.doNextNet();
        },
        onCancel() {},
      });


    },
    prev() {
      //this.currentClick++;
    },

    doNextNet(){
      submitNode({
        engineeringId: this.id,
        step: (this.current+1)
      }).then(res => {
        if (res.code == 0) {
          this.$message.success('成功')
          this.current++;
          if(this.current <=4){

            this.currentClick++;

          }else {
            this.visible = false;
          }

        } else {
          this.$message.warning(res.message)
        }
      })
    },
  }
}
</script>
<style scoped lang="less">
.btn {
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.steps-content {
  margin-top: 10px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: white;
  height: 550px;
}

.steps-action {
  position: absolute;
  margin-top: 80px;
  left: 52%;
}
/deep/ .ant-card-body {
  padding: 9px;
}
</style>
